<template>
  <div class="app-container">
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="identityCard">
        <el-input v-model="list.filter.identityCard" placeholder="输入用户ID" clearable>
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>

      <el-form-item prop="name">
        <el-input v-model="list.filter.name" placeholder="输入用户名称" clearable>
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>

      <el-form-item prop="cardNum">
        <el-input v-model="list.filter.cardNum" placeholder="输入卡号" clearable>
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>

      <el-form-item prop="levelId">
        <el-select v-model="list.filter.levelId" placeholder="选择会员等级" clearable>
          <el-option v-for="(o, i) in typeCollector.level" :key="i" :label="o.label" :value="o.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <span>
        <AuthButton
          @click="
            () => {
              importList.show = true
            }
          "
          name="导入"
        />
        <!-- <ExportExcel
          url="sot-admin-api/vip/vip-integral/downloadList"
          :param="list.filter"
        /> -->
        <AuthButton @click="showIntegralDialog = true" name="积分体系设置" />
      </span>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column align="center" type="index" />
      <el-table-column label="用户ID" prop="identityCard" />
      <el-table-column label="卡号" prop="cardNum" />
      <el-table-column label="姓名" prop="name" />
      <el-table-column label="会员等级" prop="levelName" />
      <el-table-column label="当前积分" prop="integral" />
      <el-table-column label="累计积分" prop="totalIntegral" />
      <!-- <el-table-column label="当前余额" prop="balance">
        <template slot-scope="{ row }">
          {{ row.balance / 100 }}
        </template>
      </el-table-column>
      <el-table-column label="累计充值" prop="totalRecharge">
        <template slot-scope="{ row }">
          {{ row.totalRecharge / 100 }}
        </template>
      </el-table-column> -->
      <el-table-column label="最近修改时间" prop="lastUpdateTime" />
      <el-table-column label="状态" align="center">
        <template slot-scope="{ row: { id, status } }">
          <KiPopSwitch
            v-bind="popSwitchProps(status)"
            @change="updateStatus({ id, status: status ^ 1 })"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="{ row }">
          <AuthButton @click="u(row)" name="编辑" />
          <AuthButton @click="preHandleRow__(row)" name="查看" />
        </template>
      </el-table-column>
    </el-table>

    <IntegralDialog :show.sync="showIntegralDialog" />

    <KiFormDialog :show.sync="viewOfRead.show" title="查看" v-model="viewOfRead.data">
      <!-- 积分明细 -->
      <Record v-if="viewOfRead.show" :id="viewOfRead.data.id" :totalIntegral="viewOfRead.data.totalIntegral" />
      <!-- 充值明细 -->
      <!-- <Recharge v-if="viewOfRead.show" :id="viewOfRead.data.id" :totalRecharge="viewOfRead.data.totalRecharge"></Recharge> -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="viewOfRead.show = false">取 消</el-button>
      </div>
    </KiFormDialog>

    <KiFormDialog :show.sync="importList.show" title="导入" v-model="importList.data" :submit="importListSubmit">
      <template #el-form>
        <div class="mb20">
          <!-- <ExportExcel
            url="sot-admin-api/vip/vip-integral/downloadImportTpl"
            :param="{}"
            name="模板下载"
          /> -->
          <AuthButton @click="downloadImportTpl" :loading="loadingOfDownload" name="模板下载" />
        </div>
        <el-form-item prop="file" verify>
          <Filepool v-model="importList.data.file" :count="1" fileType="excel" :upload="false" />
        </el-form-item>
      </template>
    </KiFormDialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import IntegralDialog from './components/IntegralDialog'
import Record from './components/Record'
import Recharge from './components/Recharge'
export default {
  mixins: [pageMixin],
  components: { 
    IntegralDialog, 
    Record, 
    Recharge 
  },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'sot-admin-api/vip/vip-integral'
    }
  ),
  computed: {
    ...mapGetters([
      'typeCollector'
    ])
  },
  data() {
    return {
      viewOfRead: {
        show: false,
        data: {
          id: null,
          totalIntegral: null,
          totalRecharge: null
        }
      },
      showIntegralDialog: false,
      importList: {
        show: false,
        data: {}
      },
      loadingOfDownload: false,
    }
  },
  mounted() {
    // 拉取最新会员等级列表
    this.$store.dispatch('dataset/getAllType')
  },
  methods: {
    downloadImportTpl() {
      this.loadingOfDownload = true
      this.$POST.download('sot-admin-api/vip/vip-integral/downloadImportTpl', {}, { method: 'POST' }).finally(e => {
        this.loadingOfDownload = false
      })
    }, 
    // 查看
    preHandleRow__({ id, totalIntegral, totalRecharge }) {
      this.viewOfRead.data.id = id
      this.viewOfRead.data.totalIntegral = totalIntegral
      this.viewOfRead.data.totalRecharge = totalRecharge
      this.viewOfRead.show = true
    },
    importListSubmit() {
      this.$set(this.importList,"submiting",true)
      this.$POST.upload('sot-admin-api/vip/vip-integral/importData', this.importList.data).finally(_ => {
        this.getList()
        this.$set(this.importList,"submiting",false)
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
